<template>
  <view class="booking_item_box">
    <binaryLayout
      left-text="预约编号"
      :right-text="`${props.data.bookingId}`"
    />
    <binaryLayout
      left-text="预约时间"
      :right-text="`${props.data.bookingTime}`"
    />
    <binaryLayout
      left-text="联系电话"
      :right-text="`${props.data.bookingPhone}`"
    />
    <binaryLayout left-text="预约状态">
      <template #right>
        <view class="right">
          <view class="choose" v-if="isCancel" @click="emit('onCancel')">
            取消预约
          </view>
          <view class="state" v-else>
            {{ getEnumValue(props.data.bookingState) }}
          </view>
        </view>
      </template>
    </binaryLayout>
  </view>
</template>

<script lang="ts" setup>
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import type { PageBookingByState } from '@/config/data/data'
import {
  BookingStateEnum,
  checkStateEnum,
  getEnumValue,
} from '@/config/enum/enum'
import { computed,  type PropType } from 'vue'

//自定义事件
const emit = defineEmits<{
  /**
   * 取消预约
   */
  (e: 'onCancel'): void
}>()

// 接受父组件参数
const props = defineProps({
  data: {
    type: Object as PropType<PageBookingByState>,
    default: {},
  },
})

//是否可取消预约
const isCancel = computed(() => {
 return checkStateEnum(props.data.bookingState, BookingStateEnum.SUBMIT) ||
    checkStateEnum(props.data.bookingState, BookingStateEnum.ACCEPT)
})
</script>

<style scoped lang="scss">
.booking_item_box {
  background-color: $uni-bg-color;
  margin-bottom: 30rpx;

  .right {
    display: flex;
    align-items: center;

    .choose {
      color: rgb(251, 141, 57);
      background-color: #f5c28384;
      padding: 8rpx 20rpx;
      border-radius: 10rpx;
    }

    .state {
      color: rgb(251, 160, 57);
      margin-left: 30rpx;
    }
  }
}
</style>
